﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统蒙古语情绪向量生成与分析</title>
    <!-- 引入 Tailwind CSS 和 Font Awesome -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 引入自定义 CSS -->
    <link rel="stylesheet" href="../static/css/styles.css">
    <!-- 引入 Chart.js 用于绘制图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


    <script>
    window.onload = function() {
        if (typeof Chart === 'undefined') {
            console.error('Chart.js 库加载失败');
        }
        if (typeof Chart.controllers.heatmap === 'undefined') {
            console.error('chartjs-chart-heatmap 插件加载失败');
        }
    };
</script>

</head>

<body class="bg-gradient-to-br from-light to-gray-50 min-h-screen font-sans text-dark">
    <!-- 引入自定义 JS -->
    <script src="../static/js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- 头部区域 -->
        <header class="mb-6 text-center animate-slide-in">
            <div class="inline-block mb-3 p-1 bg-gradient-to-r from-primary to-accent rounded-full">
                <div class="px-6 py-1.5 bg-white rounded-full title-gradient-border" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; background-color: white; border-radius: 9999px;">
                    <h1 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-teal-500">
                        蒙古语情绪向量生成与分析
                    </h1>
                </div>
            </div>
            <p class="text-secondary text-base md:text-lg max-w-3xl mx-auto leading-relaxed">
                输入单词，获取预训练模型生成的向量表示，支持多种语言的词，句子，段落的情绪向量生成
            </p>
        </header>

        <!-- 主内容区域 -->
        <main class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 animate-slide-in">
            <!-- 输入窗口 -->
            <div class="lg:col-span-6 gradient-border bg-blue-50 rounded-xl shadow-elevation-2 overflow-hidden transform transition-all duration-300 hover:shadow-elevation-3 hover:-translate-y-1 h-[630px] relative z-20">
                <div class="bg-primary/30 p-4 border-b border-primary/20 flex items-center">
                    <div class="w-8 h-8 rounded-full bg-primary/40 flex items-center justify-center mr-3">
                        <i class="fa-solid fa-keyboard text-primary"></i>
                    </div>
                    <h2 class="font-semibold text-lg md:text-xl text-dark">输入区域</h2>
                </div>
                <div class="p-5 h-full flex flex-col">
                    <div class="flex flex-col gap-0">
                        <div class="space-y-12">
                            <div>
                                <label for="word-input" class="block text-sm font-medium text-secondary mb-2">
                                    输入原始数据（例如：ᠶᠢᠨ）
                                </label>
                                <div class="relative">
                                    <input type="text" id="word-input"
                                           class="block w-full py-3 px-4 border-2 border-gray-100 rounded-xl focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none text-base font-mono"
                                           placeholder="请输入第一个词">
                                </div>
                            </div>

                            <div class="mt-4">
                                <label for="word-input2" class="block text-sm font-medium text-secondary mb-2">
                                    输入对比数据（可选）
                                </label>
                                <div class="relative">
                                    <input type="text" id="word-input2"
                                           class="block w-full py-3 px-4 border-2 border-gray-100 rounded-xl focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none text-base font-mono"
                                           placeholder="请输入第二个词（可选）">
                                </div>
                            </div>
                            <div>
                                <label for="model-select" class="block text-sm font-medium text-secondary mb-2">
                                    模型选项
                                </label>
                                <select id="model-select"
                                        class="block w-full py-3 px-4 border-2 border-gray-100 rounded-xl focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200 outline-none text-base appearance-none bg-white font-mono">
                                    <option value="m_wv_model2">m_wv_model2.model</option>
                                </select>
                            </div>

                            <div class="mt-0 mb-3">
                                <button id="check-button"
                                        class="w-full bg-gradient-to-r from-blue-600 to-teal-600 hover:from-blue-700 hover:to-teal-700 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] flex items-center justify-center text-lg shadow-lg shadow-blue-500/30 font-mono animate-pulse">
                                    <i class="fa-solid fa-calculator mr-2"></i> 获取向量表示
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- 输出窗口 -->
            <div class="lg:col-span-6 gradient-border bg-blue-50 rounded-xl shadow-elevation-2 overflow-hidden transform transition-all duration-300 hover:shadow-elevation-3 hover:-translate-y-1 h-[630px]">
                <div class="bg-accent/5 p-4 border-b border-accent/50 flex items-center">
                    <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-3">
                        <i class="fa-solid fa-code text-accent"></i>
                    </div>
                    <h2 class="font-semibold text-lg md:text-xl text-dark">输出区域</h2>
                </div>
                <div class="p-5 h-full flex flex-col">
                    <div class="mb-3.5 flex justify-between items-center flex-wrap gap-2">
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-medium text-secondary">向量表示</span>
                        </div>
                        <div class="flex space-x-2">
                            <button id="copy-button"
                                    class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-lg transition-all duration-200 flex items-center font-mono">
                                <i class="fa-solid fa-copy mr-1.5"></i> 复制
                            </button>
                            <button id="download-button"
                                    class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1.5 rounded-lg transition-all duration-200 flex items-center font-mono">
                                <i class="fa-solid fa-download mr-1.5"></i> 下载
                            </button>
                            <div class="text-sm bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg font-mono">
                                <i class="fa-solid fa-clock mr-1.5"></i>
                                <span id="processing-time">--</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex-grow flex flex-col">
                        <!-- 向量列表区域改为可滚动 -->
                        <div id="vector-output-container"
                             class="flex-grow relative overflow-hidden rounded-xl border border-gray-100" style="height: 400px;">

                            <div id="vector-output" class="bg-gray-50 p-4 h-full overflow-y-auto font-mono text-sm leading-relaxed pr-6">
                                <!-- 添加按钮用于控制第一个向量列表的显示和隐藏 -->
                                <button id="toggle-vector-list" class="text-base bg-primary/20 hover:bg-primary/30 text-primary px-8 py-4 rounded-lg transition-all duration-200 flex items-center gap-2 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50 mb-2">
                                    <i class="fa-solid fa-eye mr-1.5 text-xl"></i> 原始数据向量
                                </button>
                                <div class="flex-col gap-2" id="vector-list" style="display: none;">
                                    <!-- 向量数据将在这里动态填充 -->
                                </div>
                                <!-- 添加按钮用于控制第二个向量列表的显示和隐藏 -->
                                <button id="toggle-vector-list2" class="text-base bg-accent/20  hover:bg-accent/30  text-accent px-8 py-4 rounded-lg transition-all duration-200 flex items-center gap-2 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent/50 mb-2">
                                    <i class="fa-solid fa-eye mr-1.5 text-xl"></i> 对比数据向量
                                </button>
                                <div class="flex-col gap-2" id="vector-list2" style="display: none;">
                                    <!-- 第二个词的向量数据将在这里动态填充 -->
                                </div>
                            </div>


                        </div>
                        <!-- 新增数值信息展示 -->
                        <div class="mt-3">
                            <div class="bg-white/90 p-3 rounded-lg shadow-sm border border-gray-100">
                                <div class="flex justify-between text-xs font-mono">
                                    <div>
                                        <span class="text-gray-600">当前值: </span>
                                        <span id="current-values" class="text-primary">--</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-600">向量维度: </span>
                                        <span id="vector-dimension" class="text-accent">300</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 新增对比图区域 -->
        <div class="mt-8">
            <h2 class="font-semibold text-lg md:text-xl text-dark mb-4">向量分析对比图</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">

                <div class="gradient-border bg-blue-50 rounded-xl shadow-elevation-2 overflow-hidden transform transition-all duration-300 hover:shadow-elevation-3 hover:-translate-y-1">
                    <div class="bg-primary/30 p-4 border-b border-primary/20 flex items-center">
                        <div class="w-8 h-8 rounded-full bg-primary/40 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-chart-scatter text-primary"></i>
                        </div>
                        <h3 class="font-semibold text-lg md:text-xl text-dark">散点图</h3>
                    </div>
                    <div class="p-5">
                        <canvas id="scatterplot"></canvas>
                    </div>
                </div>
                <div class="gradient-border bg-blue-50 rounded-xl shadow-elevation-2 overflow-hidden transform transition-all duration-300 hover:shadow-elevation-3 hover:-translate-y-1">
                    <div class="bg-primary/30 p-4 border-b border-primary/20 flex items-center">
                        <div class="w-8 h-8 rounded-full bg-primary/40 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-chart-line text-primary"></i>
                        </div>
                        <h3 class="font-semibold text-lg md:text-xl text-dark">近似图</h3>
                    </div>
                    <div class="p-5">
                        <canvas id="similarityplot"></canvas>
                    </div>
                </div>
                <div class="gradient-border bg-blue-50 rounded-xl shadow-elevation-2 overflow-hidden transform transition-all duration-300 hover:shadow-elevation-3 hover:-translate-y-1">
                    <div class="bg-primary/30 p-4 border-b border-primary/20 flex items-center">
                        <div class="w-8 h-8 rounded-full bg-primary/40 flex items-center justify-center mr-3">
                            <i class="fa-solid fa-face-smile text-primary"></i>
                        </div>
                        <h3 class="font-semibold text-lg md:text-xl text-dark">情感分析图</h3>
                    </div>
                    <div class="p-5">
                        <canvas id="sentimentplot"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <footer class="mt-8 text-center text-gray-500 animate-slide-in">
            <div class="inline-block p-1 bg-gradient-to-r from-primary/20 to-accent/20 rounded-full">
                <div class="px-5 py-2.5 bg-white rounded-full">
                    <p class="font-medium text-sm">使用预训练的 <span class="text-primary">m_wv_model2.model</span> 模型生成向量
                    </p>
                    <p class="mt-1.5 text-xs">支持多种语言的词向量生成</p>
                </div>
            </div>
        </footer>
    </div>

    <!-- 成功提示框 -->
    <div id="toast"
         class="fixed bottom-5 right-5 bg-gradient-to-r from-green-500 to-teal-500 text-white px-5 py-2.5 rounded-xl shadow-elevation-3 transform translate-y-20 opacity-0 transition-all duration-300 flex items-center z-50">
        <i class="fa-solid fa-check-circle mr-2.5 text-lg"></i>
        <span id="toast-message" class="text-base">操作成功</span>
    </div>


</body>
</html>